<template>
    <div class="flex flex-col h-full py-4 px-6">
        <div class="flex justify-between relative">
            <el-tabs model-value="sys" type="card" class="flex-1">
                <el-tab-pane label="消息通知" name="sys" />
            </el-tabs>
            <div class="absolute right-0 top-0">
                <el-button
                    size="default"
                    @click="handleRead()"
                >
                    全部已读
                </el-button>
                <el-button
                    size="default"
                    @click="handleDelete()"
                >
                    删除已读
                </el-button>
            </div>
        </div>

        <div v-if="pager.lists.length > 0" class="flex-1 overflow-hidden">
            <el-scrollbar>
                <div
                    v-for="(item, index) in (pager.lists as NoticeListResponse[])"
                    :key="index"
                    class="notice-item"
                    @dblclick="clickDelete(item.id)"
                >
                    <div class="flex items-center">
                        <div class="flex items-center flex-1">
                            <el-badge is-dot :hidden="!!item.is_read">
                                <h3 class="text-lg font-bold">{{ item.title }}</h3>
                            </el-badge>
                            <div class="ml-2 text-sm text-tx-secondary">
                                ({{ item.create_time }})
                            </div>
                        </div>
                        <el-button
                            v-if="!item.is_read"
                            size="small"
                            @click="handleRead(item.id)"
                        >
                            已读
                        </el-button>
                    </div>
                    <p class="mt-2.5">{{ item.content }}</p>
                </div>
            </el-scrollbar>
        </div>

        <div v-else class="flex justify-center mt-16">
            <el-empty description="暂无消息" />
        </div>

        <div v-if="pager.lists.length > 0" class="flex justify-end my-4 mb-0">
            <paging
                v-model="pager"
                layout="prev, pager, next"
                @change="queryLists"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/composables/usePaging'
import useAppStore from '~/stores/app'
import noticeApi from '~/api/notice'

const appStore = useAppStore()

// 分页查询
const { pager, queryLists } = usePaging({
    fetchFun: noticeApi.lists
})

/**
 * 标记已读
 *
 * @param {number} [id]
 * @author zero
 */
const handleRead = async (id?: number) => {
    await noticeApi.read(id)
    await appStore.getMonitor()
    await queryLists()
    feedback.msgSuccess('操作成功')
}

/**
 * 标记删除
 *
 * @param {number} [id]
 * @author zero
 */
const handleDelete = async (id?: number) => {
    await noticeApi.delete(id)
    await appStore.getMonitor()
    await queryLists()
    feedback.msgSuccess('操作成功')
}

/**
 * 双击删除
 *
 * @param {number} id
 * @author zero
 */
const clickDelete = async (id: number) => {
    feedback.confirm('您确定要删除这条消息吗?')
        .then(async () => {
            await noticeApi.delete(id)
        }).catch(() => {})
}

onMounted(async () => {
    await queryLists()
})
</script>

<style scoped lang="scss">
:deep(.el-tabs) {
    .el-tabs__item.is-active,
    .el-tabs__item:hover {
        color: var(--el-text-color-regular);
    }
}

.notice-item {
    padding: 15px 10px;
    color: var(--el-text-color-regular);
    cursor: pointer;
    border-bottom: 1px solid var(--el-border-color-light);
    &:hover {
        background-color: var(--el-bg-color-page);
    }
}
</style>
